<!-- 文章列表项 -->
<template>
  <div>
    <van-cell class="article-wrap" :to="{
      name:'article',
      params:{
        articleId:articles.art_id
      }
    }">
      <template #title >
        <span class="title van-multi-ellipsis--l2">{{articles.title}}</span>
      </template>
      <template #label>
        <div v-if="articles.cover.type === 3" class="cover-wrap">
          <div v-for="(img,index) in articles.cover.images" :key="index" class="label-img">
            <van-image :src="img" fit='cover'/>
          </div>
        </div>
        <div class="label-text">
          <span>{{articles.aut_name}}</span>
          <span>评论{{articles.comm_count}}</span>
          <span>{{getTime}}</span>
        </div>
      </template>
      <template #value>
      <div class="value-wrap" v-if="articles.cover.type === 1">
        <van-image class="value-img"
        :src="articles.cover.images[0]" fit='cover'
        />
      </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import time from '@/utils/day.js'
export default {
  name: 'ArticelItem',
  props: {
    articles: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    getTime () {
      return time(this.articles.pubdate)
    }
  }
}
</script>

<style  scoped lang='less'>
.article-wrap {
  .title {
    font-size: 32px;
    color: #3a3a3a
  }
  /deep/.van-cell__value {
      flex: unset ;
      .value-wrap {
        width: 232px;
        height: 146px;
        padding-left: 25px;
      }
      .van-image__img {
        width: 232px;
        height: 146px;
      }
  }
  .label-text {
      font-size: 22px;
      color: #b4b4b4;
      span+span {
          margin-left: 22px;
      }
  }
  .cover-wrap {
      display: flex;
      height: 146px;
      padding: 30px 0;
      .label-img {
          flex: 1;
          height: 146px;
          .van-image {
              height: 146px;
              width: 100%;
          }
      }
      .label-img+.label-img {
          padding-left: 4px;
      }
  }
}
</style>
